<template>
	<view>
		<nav-bar title="选择充电枪"></nav-bar>
		<image :style="{'top':navHeight+'px'}" class="top-bg" src="https://oss.jxhecong.com/v2/image/bike_top_bg@2x.png"></image>
		<scroll-view :style="{'margin-top':(navHeight+10)+'px'}">
			<view class="card box">
				<view class="flex">
					<image style="width:36rpx;height:36rpx;" src="https://oss.jxhecong.com/v2/image/oil@2x.png"></image>
					<view class="name">设备名称：{{chargeInfo.chargingName}}</view>
				</view>
				<view class="code">设备编码：{{chargeInfo.shellId}}</view>
				<view class="code">核定功率：{{chargeInfo.power}}</view>
				<view class="code">接口标准：{{chargeInfo.standard}}</view>
				<view class="code">站点名称：{{chargeInfo.chargingGroupName}}</view>
			</view>
			<view class="card box" style="margin-top:24rpx;">
				<view class="section-title">请选择充电器枪</view>
				<view class="A_B_list">
					<image class="pile-icon" src="https://oss.jxhecong.com/v2/image/pile@2x.png"></image>
					<view v-if="chargeInfo.socketCount == 2">
						<view class="gun-box" :class="{'active-gun':socketA.status==0, 'select-gun': gunIndex==0}" @click.stop="gun_Select(0)">
							<image class="gun" src="https://oss.jxhecong.com/v2/image/gun_A@2x.png"></image>
							<view>{{socketA.socketName}}</view>
						</view>
						<view class="gun-box" :class="{'active-gun':socketB.status==0, 'select-gun': gunIndex==1}"  @click.stop="gun_Select(1)" style="margin-top:48rpx;">
							<image class="gun" src="https://oss.jxhecong.com/v2/image/gun_B@2x.png"></image>
							<view>{{socketB.socketName}}</view>
						</view>
					</view>
					<view v-if="chargeInfo.socketCount == 1">
						<view class="gun-box" :class="{'active-gun':socketA.status==0, 'select-gun': gunIndex==0}" @click.stop="gun_Select(0)">
							<image class="gun" src="https://oss.jxhecong.com/v2/image/gun_A@2x.png"></image>
							<view>{{this.socketA.socketName}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import * as chargeApi from '../../api/charge/index.js'
	import * as homeApi from '../../api/home/index.js'
	export default{
		components:{navBar},
		data(){
			return{
				id:'',
				navHeight:0,
				gunIndex:-1,
				chargeInfo:{},
				socketA:{},
				socketB:{}
			}
		},
		onUnload() {
			globalData.qrCode=""
		},
		onHide() {
			globalData.qrCode=""
		},
		onLoad(options) {
			this.navHeight = globalData.titleHeight;
			let url = ""
			let shellId=""
			let data=""
			// #ifdef MP-WEIXIN
			url = decodeURIComponent(options.q)
			data = url.split('shell=')[1]
			shellId = options.shellId
			// #endif
			// #ifdef MP-ALIPAY
			url = decodeURIComponent(globalData.qrCode)
			data = url.split('shell=')[1]
			shellId = options.shellId
			// #endif
			if (data || shellId) {
				data = data ? data : shellId
				let userInfo=uni.getStorageSync('userInfo')
				if(!userInfo) {
					uni.reLaunch({
						url:'/pages/login/login?type=1&shell=' + data
					})
					return
				}
				this.getChargeIdByQRCode(data,(id)=>{
					this.id=id;
					this.getCarChargingDetail();
				})
			} else {
				this.id=options.id;
				this.getCarChargingDetail();
			}
		},
		methods:{
			gun_Select(index){
				if(index == 0){
					if(this.socketA.status==0) {
						this.gunIndex=index
						uni.navigateTo({
							url:'/pages/charge/carCharge?id=' + this.socketA.id
						})
					}
					
				}else{
					console.log(this.socketB)
					if(this.socketB.status ==0) {
						this.gunIndex=index
						uni.navigateTo({
							url:'/pages/charge/carCharge?id=' + this.socketB.id
						})
					}
				}
			},
			getChargeIdByQRCode(qrcode,callback){
				homeApi.getChargeScan(qrcode).then((res) => {
					uni.hideLoading()
					typeof callback == 'function'&&callback(res.data.chargingId)
				}).catch((errMsg) => {
					uni.showToast({
						title:errMsg,
						icon:'none'
					})
				})
			},
			getCarChargingDetail() {
				chargeApi.getCarChargingDetail(this.id).then((res)=>{
					console.log(res.data)
					this.chargeInfo = res.data
					if(this.chargeInfo.socketCount == 1){
						this.socketA = res.data.sockets[0]
					}else{
						this.socketA = res.data.sockets[0]
						this.socketB = res.data.sockets[1]
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg{
		position: fixed;
		left:0rpx;
		right:0rpx;
		height:112rpx;
		width:100%;
	}
	.card{
		position: relative;
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		margin-left:30rpx;
		margin-right:30rpx;
	}
	.box{
		padding:30rpx;
	}
	.flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.name{
		color:#303133;
		font-size:32rpx;
		font-weight: bold;
		margin-left:12rpx;
	}
	.code{
		color:#909399;
		font-size:24rpx;
		margin-top:12rpx;
	}
	.section-title{
		color:#333333;
		font-size: 28rpx;
	}
	.A_B_list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top:60rpx;
		.pile-icon{
			width:234rpx;
		}
		.gun-box{
			width:270rpx;
			height:180rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color:#F3F4F6;
			border-radius:18rpx;
		}
		.active-gun{
			background-color:#FFFFFF;
			border: solid 2rpx #F3F4F6;
		}
		.select-gun{
			border: solid 2rpx #6ABF6C;
		}
		.gun{
		  width:146rpx;
		  height:102rpx;
		}
	}
</style>
